<template>
	<view class="product-list">
		<up-row gutter="9" style="flex-wrap: wrap">
			<up-col span="6" v-for="(item, index) in productList" :key="index" @click="goUrl('/pages/product/details?id=' + item.id)">
				<view class="item flex flex-col">
					<image :src="imgUrl + item.icon" class="icon" :lazy-load="true"></image>
					<view class="bottom">
						<view class="title line-2-clamp">{{ item.title }}</view>
						<view class="price-box flex justify-between items-center">
							<view class="price rmb">
								{{ item.vip_price }}
							</view>
						</view>
						<view class="desc flex items-center justify-between">
							<view class="through">￥{{ item.price }}</view>
							<view class="sale">已售{{ item.sales }}</view>
						</view>
					</view>
				</view>
			</up-col>
		</up-row>
	</view>
	<view class="show-load" v-if="showLoad" style="padding: 30upx">
		<up-loading-icon text="加载中" textSize="13"></up-loading-icon>
	</view>
	<up-empty v-if="!productList.length && !showLoad" icon="/static/product/ic_zerodata@2x.png" iconSize="392rpx" marginTop="50%" text="暂无" />
</template>

<script setup>
	import { ref, computed, watch, nextTick, defineProps, defineEmits, onUnmounted } from 'vue';
	import { port, imgUrl, goUrl, hint } from '/service/port';
	import { onShow, onReachBottom, onHide, onUnload } from '@dcloudio/uni-app';

	const productList = ref([]);
	const productPage = ref(1);
	const showLoad = ref(false);
	const props = defineProps({
		modelValue: {
			type: Array,
			default: () => {}
		},
		obj: {
			type: Object,
			default: () => ({})
		}
	});

	const emits = defineEmits(['update:modelValue']);

	watch(
		() => props.modelValue,
		(newVal) => {
			productPage.value = 1;
			productList.value = [];
			// getProcut();
		},
		{ deep: true }
	);

	const mergedObj = computed(() => ({
		...(!props.modelValue ? props.obj : props.modelValue),
		page: productPage.value
	}));

	const getProcut = async (bom) => {
		!bom ? (showLoad.value = true) : '';

		let e = await port('getProduct', mergedObj.value);
		showLoad.value = false;

		if (e.data.length) {
			productList.value = [...productList.value, ...e.data];
			productPage.value++;
		}
	};

	const reload = () => {
		productPage.value = 1;
		getProcut();
	};

	defineExpose({ reload });

	const isOnShow = ref(false);
	onShow(() => {
		if (!isOnShow.value) {
			productPage.value = 1;
			productList.value.length = 0;
			isOnShow.value = true;
			nextTick().then(() => {
				getProcut();
			});
		}
	});

	onHide(() => {
		isOnShow.value = false;
	});

	onReachBottom(() => {
		getProcut(true);
	});
</script>

<style scoped lang="scss">
	.product-list {
		margin: 24rpx;
		.item {
			width: 100%;
			background: #ffffff;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			.icon {
				width: 100%;
				height: 336rpx;
				border-radius: 16rpx;
			}
			.bottom {
				padding: 15rpx 20rpx 25rpx 20rpx;
				.title {
					font-weight: 500;
					font-size: 26rpx;
					color: #000000;
					height: 70rpx;
					margin-bottom: 20rpx;
				}

				.price-box {
					.price {
						font-weight: 500;
						font-size: 34rpx;
						color: #fb3204;
					}
					.tips {
						background: linear-gradient(0deg, #f81a2e 0%, #fc4856 100%);
						border-radius: 12rpx 15rpx 15rpx 0rpx;
						font-weight: 400;
						font-size: 20rpx;
						color: #ffffff;
						line-height: 42rpx;
						width: 74rpx;
						height: 30rpx;
						line-height: 30rpx;
						text-align: center;
						margin-left: 6rpx;
					}
				}
			}

			.desc {
				margin-top: 10rpx;
				.through {
					font-weight: 400;
					font-size: 24rpx;
					color: #aaaaaa;
					line-height: 36rpx;
					text-decoration-line: line-through;
				}
				.sale {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}
</style>
